<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-link :underline="false" class="text">选择考试</el-link>
    </div>

    <el-form :model="choiceForm" :rules="rules" ref="choiceForm">
      <el-form-item prop="select">
        <el-row :gutter="5" class="question">
          <el-col :xs="2" :sm="3" :md="3" :lg="2" :xl="2">
            <el-link :underline="false">科目</el-link>
          </el-col>
          <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
            <el-select v-model="choiceForm.select" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="radio">
        <el-row :gutter="5" class="question">
          <el-col :xs="2" :sm="3" :md="3" :lg="2" :xl="2">
            <el-link :underline="false">问题类型</el-link>
          </el-col>
          <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
            <el-radio-group v-model="choiceForm.radio">
              <el-radio-button label="1">单选</el-radio-button>
              <el-radio-button label="2" disabled>判断</el-radio-button>
              <el-radio-button label="3">问答</el-radio-button>
              <el-radio-button label="4" disabled>混合</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="slider">
        <el-row :gutter="5" class="question">
          <el-col :xs="2" :sm="3" :md="3" :lg="2" :xl="2">
            <el-link :underline="false">问题数量</el-link>
          </el-col>
          <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
            <el-slider
              v-model="choiceForm.slider"
              :step="5"
              :max="50"
              show-stops>
            </el-slider>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="rate">
        <el-row :gutter="5" class="question">
          <el-col :xs="2" :sm="3" :md="3" :lg="2" :xl="2">
            <el-link :underline="false">问题难度</el-link>
          </el-col>
          <el-col :xs="20" :sm="15" :md="10" :lg="10" :xl="10">
            <el-rate
              v-model="choiceForm.rate"
              :colors="colors">
            </el-rate>
          </el-col>
        </el-row>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="15" :offset="2">
          <el-button type="warning" plain>随机</el-button>
          <el-button type="success" @click="resetForm('choiceForm')" plain>重置</el-button>
          <el-button type="primary" @click="submitForm('choiceForm')" plain>确定</el-button>
        </el-col>
      </el-row>
    </el-form>

  </el-card>
</template>


<script>
    export default {
      name: "choice",
      data(){
        let validateSlider = (rule, value, callback) => {
          if (value === 0) {
            callback(new Error());
          } else {
            callback();
          }
        };
        let validateRate = (rule, value, callback) => {
          if (value === 0) {
            callback(new Error());
          } else {
            callback();
          }
        };
        return{
          colors: ['#99A9BF', '#F7BA2A', '#FF9900'],

          choiceForm : {
            select: '',//下拉框，考试科目
            radio : '',//单选，考试类型
            slider : 5,//滑块，题目数量
            rate : 1,//星级，题目难度
          },
          options: [{//科目选择列表
            value: '语文',
            label: '语文'
          }, {
            value: '数学',
            label: '数学'
          }, {
            value: '计算机',
            label: '计算机'
          }, {
            value: '历史',
            label: '历史'
          }, {
            value: '政治',
            label: '政治'
          }],
          rules: {//选择考试表单证规则
            select: [
              { required: true, message: '请选择考试科目', trigger: 'change' }
            ],
            radio: [
              { required: true, message: '请选择问题类型', trigger: 'change' }
            ],
            slider: [
              { validator: validateSlider, message: '数量不能为0 ', trigger: 'change' }
            ],
            rate: [
              { validator: validateRate, message: '难度不能为空 ', trigger: 'blur' }
            ],
          }
        }
      },
      methods : {
        submitForm(formName){
          console.log("this.choiceForm =",this.choiceForm);
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$axios({
                method : "POST",
                url:"/user?method=startExam",
                data : {
                  form : this.choiceForm,
                },
              }).then((response)=>{
                console.log("response.data =",response.data);
                if (response.data === 0){
                  this.$message.success({ message: '存在考试，不能新增考试', offset: 150 });
                }else if (response.data === 1){
                  this.$message.success({ message: '开始考试', offset: 150 });
                  this.$router.push({path: '/user/exam'});
                }else if (response.data === 2){
                  this.$message.warning({ message: '题目信息有误，试题不够等', offset: 150 });
                }
              }).catch((error)=> {
                this.$notify({title: '错误', message:'/user?method=startExam接口错误', type: 'error'});
              });
            } else {
              return false;
            }
          });
        },
        resetForm(formName){
          this.$refs[formName].resetFields();
        },
      },
      beforeMount (){//初始化数据
      },
      mounted(){
      },
    }
</script>



<style scoped>
  form{
    width: auto;
  }
  .el-row{
    margin: 10px 0;
  }
  .question{
    /* margin: 20px 0;*/
  }
  .question span,.text{
    font-size: 20px;
    font-weight: 500;
  }

  .el-card__header{
    background-color: rgba(0,0,0,.03);
  }
  .el-card__body{
    padding-top: 0;
  }
  .clearfix{
    display: flex;
    align-items: center;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

</style>

